<div class="home-container">
    <div class="jumbotron">
        <div class="row">
            <div class="col-12">
                <h1 class="display-3"> {{ 'home.WELCOME' | translate }}!</h1>
                <p class="lead">{{ 'home.DESCRIPTION' | translate }}.</p>
                <hr class="my-4">
                <div class="text-center">
                    <img src="assets/img/brand/logo-full.png" class="d-none d-lg-block mx-auto home-logo-big">
                    <img src="assets/img/brand/logo-min.png" class="d-lg-none mx-auto img-fluid home-logo">
                </div>
                <p class="lead">
                    <a class="btn btn-primary btn-lg" href="https://github.com/brunohbrito/JP-Project" target="_blank" role="button">Learn
                        more
                    </a>
                </p>
            </div>
        </div>
    </div>
    <!-- Cards -->
    <div class="card-deck mb-3 text-center">
        <!-- Clients -->
        <div class="card mb-4 box-shadow">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{ 'general.clients' | translate }}</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">
                    <span title="Clients" class="font-size-1" aria-hidden="true">💻</span>
                </h1>
                <a [routerLink]="'/clients'" class="btn btn-lg btn-block btn-primary">{{ 'Manage' | translate }} </a>
            </div>
        </div>
        <!-- Identity Resources -->
        <div class="card mb-4 box-shadow">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{ 'general.identity-resource' | translate }}</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">
                    <span class="font-size-1" title="Identity Resources" aria-hidden="true">🔖</span>
                </h1>
                <a [routerLink]="'/identity-resource'" class="btn btn-lg btn-block btn-outline-primary">{{ 'Manage' |
                    translate }}</a>
            </div>
        </div>
        <!-- Api Resources -->
        <div class="card mb-4 box-shadow">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{ 'general.api-resource' | translate }}</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">
                    <span class="font-size-1" title="Api Resources" aria-hidden="true">☁️</span>
                </h1>
                <a [routerLink]="'/api-resource'" class="btn btn-lg btn-block btn-primary">{{ 'Manage' | translate }}</a>
            </div>
        </div>

    </div>
    <div class="card-deck mb-3 text-center">
        <!-- Persisted grants -->
        <div class="card mb-4 box-shadow">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{ 'general.persisted-grants' | translate }}</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">
                    <span class="font-size-1" title="Api Resources" aria-hidden="true">🔑</span>
                </h1>
                <a [routerLink]="'/persisted-grants'" class="btn btn-lg btn-block btn-outline-primary">{{ 'Manage' |
                    translate }}</a>
            </div>
        </div>
        <!-- Users -->
        <div class="card mb-4 box-shadow">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{ 'general.users' | translate }}</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">
                    <span class="font-size-1" title="Api Resources" aria-hidden="true">👨‍👩‍👧‍👦</span>
                </h1>
                <a [routerLink]="'/users'" class="btn btn-lg btn-block btn-primary">{{ 'Manage' |
                    translate }}</a>
            </div>
        </div>
        <!-- Roles -->
        <div class="card mb-4 box-shadow">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">{{ 'general.roles' | translate }}</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title">
                    <span class="font-size-1" title="Api Resources" aria-hidden="true">🔐</span>
                </h1>
                <a [routerLink]="'/roles'" class="btn btn-lg btn-block btn-outline-primary">{{ 'Manage' |
                    translate }}</a>
            </div>
        </div>
    </div>

</div>